import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch,IRouteComponentProps } from 'umi'
import { ListLeftItem, ArticleListItem, ClassifyListItem } from '../../utils/knowledge'
import { EyeOutlined, ShareAltOutlined } from '@ant-design/icons'
import moment from 'moment'
import './knowledge.less'
const Knowledge: React.FC<IRouteComponentProps> = ({history}) => {
    let state = useSelector(state => state.knowledge)
    let dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: 'knowledge/getList'
        })
        dispatch({
            type: 'knowledge/getClassify'
        })
        dispatch({
            type: 'knowledge/getArticle'
        })
    }, [])
    console.log('list...', state);
    moment.defineLocale('zh-cn', {
        relativeTime: {
            future: '%s内',
            past: '%s前',
            s: '几秒',
            m: '1 分钟',
            mm: '%d 分钟',
            h: '1 小时',
            hh: '%d 小时',
            d: '1 天',
            dd: '%d 天',
            M: '1 个月',
            MM: '%d 个月',
            y: '1 年',
            yy: '%d 年'
        },
    });
    return (
        <div className='Knowledge'>
            <div className='mainLeft'>
                {
                    state.list[0] && state.list[0].map((item: ListLeftItem) => (
                        <div key={item.id} className='leftItem' onClick={()=>{
                            // dispatch({
                            //     type:'knowledge/getLeftDetail',
                            //     payload:{
                            //         id:item.id
                            //     }
                            // })
                            history.push(`/knowledge/${item.id}`)
                        }}>
                            <div>
                                <h4>{item.title}</h4>
                                <span>{moment(item.createAt, "YYYYMMDD").fromNow()}</span>
                            </div>
                            <div>
                                <div><img src={item.cover} alt="" /></div>
                                <div>
                                    <p>{item.summary}</p>
                                    <div>
                                        <span><EyeOutlined /> {item.views}</span>
                                        <span><ShareAltOutlined /> 分享</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    ))
                }
            </div>
            <div className='mainRight'>
                <div className='mRightTop'>
                    <p>推荐阅读</p>
                    {
                        state.articleList && state.articleList.map((item: ArticleListItem) => (
                            <div key={item.id}>
                                <span>{item.title}</span>·<span>大约{moment(item.createAt, "YYYYMMDD").fromNow()}</span>
                            </div>
                        ))
                    }

                </div>
                <div className='mRightBottom'>
                    <p>文章分类</p>
                    {
                        state.classifyList && state.classifyList.map((item: ClassifyListItem) => (
                            <div key={item.id}>
                                <span>{item.label}</span>
                                <span>共计{item.articleCount}篇文章</span>
                            </div>
                        ))
                    }
                </div>
            </div>
        </div>
    )
}
export default Knowledge
